<template>
	<view class="home-box">
		<topnavi @sendLanguage="getLanguage"></topnavi>
		<view class="home-frist-box">
			<image src="@/static/hjpImg/headTu.png" ></image>
		</view>
		<view :class="['home-second-box', {'home-second-en': currentLan==='en'}]"><text style="color: #8F56EC;">公平发射</text> {{$t('home.H9')}}</view>
		<view :class="['text1', {'buy-one-en': currentLan==='en'}]">
			一场新风口浪尖的博弈
		</view>
		<view :class="['buy-one', {'buy-one-en': currentLan==='en'}]">XSJ结合只涨不跌领域运营做到全新的交易分红的创新暴力分红，稳定运行，螺旋上涨趋势</view>
		<view class="ren-button" @click="openBuyPop=true">Mint</view>
		<!-- <view class="ren-rules">
			<view class="tip-icon">
				<u-image  src="@/static/hjpImg/tipIcon.png" width="16px" height="16px"></u-image>
			</view>
			<view>{{$t('home.H4')}}</view>
			<view class="right-arrow" @click="openRuleModal=false">
				<u-image  src="@/static/hjpImg/rightA.png" width="16px" height="8px"></u-image>
			</view>
		</view> -->
		<view class="home-data-show">
			<!-- <view class="data-show-one">{{$t('home.H11')}}</view> -->
			<view v-for="(items, index) in dataShowList" :key="index" class="data-show-two">
				<view class="img-style">
					<u-image :src="items.img" width="42px" height="42px"></u-image>
				</view>
				<view class="name-style">{{items.title}}</view>
				<view class="count-style" style="color: #8344E8;">{{items.count}}<text v-if="index===1">U</text></view>
			</view>
			
			<view class="data-show-twos">
				<view class="itemtwo">
					<view class="">
						<view class="">
							1%
						</view>
						<view class="">
							买卖税
						</view>
					</view>
					<view class="">
						<view class="">
							45%
						</view>
						<view class="">
							持币分红
						</view>
					</view>
					<view class="">
						<view class="">
							55%
						</view>
						<view class="">
							LP流动性分红
						</view>
					</view>
				</view>
				
			</view>
			<view class="data-show-twos">
				<view class="itemtwo">
					<view class="">
						<view class="">
							1%
						</view>
						<view class="">
							底池通缩/H
						</view>
					</view>
					<view class="">
						<view class="">
							45%
						</view>
						<view class="">
							榜一跟单
						</view>
					</view>
					<view class="">
						<view class="">
							55%
						</view>
						<view class="">
							回购拉盘
						</view>
					</view>
				</view>
				
			</view>
			<view class="foottext">
				更多精彩内容，上线揭晓！
			</view>
			<!-- <view class="token-style">{{$t('home.H15')}}</view>
			<view class="date-box">
				<u-line-progress
					activeColor="#613AF1" 
					:percentage="percentageValue" 
					height="12"
				></u-line-progress>
			</view>
			<view class="home-plege-btn">
				<view>{{$t('home.H16')}}{{Subscribed}}U</view>
				<view>{{$t('home.H17')}}</view>
			</view> -->
		</view>
		<view class="home-four-title">Mint方案</view>
		<view class="home-five-box">
			<view class="itembox">
				<view class="">
					<view class="">
						
					</view>
					<view class="">
						Mint
					</view>
				</view>
				<view class="">
					每份100U，每个地址最多Mint20份
					Mint后以LP形式发放到钱包
				</view>
			</view>
			<view class="itembox">
				<view class="">
					<view class="">
						
					</view>
					<view class="">
						推广收益
					</view>
				</view>
				<view class="">
					
直推8%  间推5%


				</view>
			</view>
			<view class="itembox">
				<view class="">
					<view class="">
						
					</view>
					<view class="">
						团队奖励
					</view>
				</view>
				<view class="">
					黄金奖励XSJ代币20000枚，直推间推达到10份 <br>
					白银奖励XSJ代币50000枚，直推三个黄金<br>
					王者奖励XSJ代币100000枚，直推三个白银<br>
				</view>
			</view>
			
			<!-- <view class="home-five-vedio">
				<view class="five-icon">
					<u-image src="@/static/hjpImg/teamLogo.png" width="64px" height="64px"></u-image>
				</view>
				<view class="five-user">{{getCaption(usreaddress)}} {{$t('home.H19')}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H30')}}</view>
				<view class="five-rate">10%</view>
			</view>
			<view class="home-five-show">
				
				<view class="five-text">{{$t('home.H79')}}100U {{$t('home.H80')}}</view>
				<view class="five-rate">{{selectUse[6]}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H79')}}300U {{$t('home.H80')}}</view>
				<view class="five-rate">{{selectUse[7]}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H79')}}500U {{$t('home.H80')}}</view>
				<view class="five-rate">{{selectUse[8]}}</view>
			</view> -->
		</view>
		<!-- <view class="home-six-box">
			<view v-for="(listItem, indexItem) in listArr" :key="indexItem" class="home-six-list">
				<view class="item-six-list">
					<view class="six-list-line"></view>
					<view class="six-list-count">{{listItem.count}}</view>
					<view :class="['six-list-name', {'six-list-en': currentLan==='en'}]">{{listItem.name}}</view>
				</view>
			</view>
		</view> -->
		
		<!-- <view class="six-list-btn" @click="openSharePop=true">{{$t('home.H37')}}</view> -->
		<view class="six-list-text">合作伙伴</view>
		<view class="home-nine-box">
			<image src="@/static/hjpImg/parentsT.png" width="554rpx" height="432rpx"></image>
		</view>
		<view class="home-footer">
			<view class="item-footer">
				<view class="footer-tbox">
					
					<image src="@/static/hjpImg/lianxi.jpg" ></image>
					<view class="">
						XSJ联系方式
					</view>
				</view>
				<view class="menu-list">
					<view v-for="(itemImg, indexImg) in footerIcon" :key="indexImg" class="menu-list-item">
						<a :href="itemImg.limke">
							<u-image :src="itemImg.img" width="42px" height="42px"></u-image>
						</a>
					</view>
				</view>
				<view class="footer-icon-box">
					© 2024 XSJ Systems. All rights reserved.
				</view>
			</view>
		</view>
		<!-- 邀请弹窗 -->
		<u-overlay :show="showoverl"  >
			<view class="ceotent">
				<view class="ceotbox">
					<u-icon name="close" color="#FFF" size="20"  @click="showoverl=false"></u-icon>
				</view>
				<view class="overlaytitle">{{$t('home.H46')}}</view>
				<view class="codeinput">
					<u--input
					    :placeholder="$t('home.H47')"
					    border="none"
						inputAlign='center'
						fontSize='14px'
						color='#fff'
					    v-model="valueCode"
					  ></u--input>
				</view>
				<view class="buy-number">
					需支付<view class="buy-bi" style="color: #8344E8;letter-spacing: 2rpx;">100USDT</view>
				</view>
				<view class="qeuding" @click="binCilck">{{$t('home.H48')}}</view>
			</view>
		</u-overlay>
		
		
		<u-overlay :show="openBuyPop">
			<view class="overlay-buy">
				<u-icon name="close-circle" color="#B9C1D9" size="25" class="close-buy" @click="buyPopFun"></u-icon>
				<view class="buy-title">Mint</view>
				<view class="buy-content">
					<view v-for="(itemB, indexBuy) in buyList" :key="indexBuy" 
					:class="['but-con-item', {'but-active-item': activeCheck===indexBuy}]" @click="changeFun(indexBuy, itemB)">
						{{itemB}}U
					</view>
				</view>
				<input type="number" class="input" />
				<!-- <view class="buy-number">
					{{$t('home.H13')}}<view class="buy-bi">{{dataShowList[1].count}}U</view>
				</view> -->
				<!-- <view class="buy-number buy-margin">
					{{$t('home.H43')}}<view class="buy-bi"><text class="buy-count">{{resultValue/dataShowList[1].count}}</text>{{$t('home.H44')}}</view>
				</view> -->
				<view class="buy-button" @click="BUYClick">Mint</view>
				
				<view><text>限购份数：</text>20份</view>
	
			</view>
		</u-overlay>
		<u-overlay :show="openSharePop">
			<view class="overlay-share">
				
				<u-icon name="close-circle" @click='openSharePop=false'  color="#B9C1D9" size="16" class="close-style" ></u-icon>
				<view class="share-text">
					https://peaceplan.world//?code={{usreaddress}}
				</view>
				<view class="share-button" @click="copy(`https://peaceplan.world/?code=${usreaddress}`)">{{$t('home.H45')}}</view>
			</view>
		</u-overlay>
		<u-overlay :show="openRuleModal">
			<view class="overlay-rules">
				<view class="overlay-text">
					<view class="overtitle">Purchase Guide</view>
					<view class="overtext">
					</view>
					<view class="overmutils">
						Example:
						If 10 USDT is withdrawn and a handling fee of 0.5 USDT is charged, the actual amount received is 9.5 USDT
						If withdrawing NPC, a handling fee equivalent to 5% of the withdrawal amount at the real-time exchange rate will be charged for NPC withdrawal
					</view>
				</view>
				<view class="close-btn">
					<u-icon name="close-circle" color="#fff" size="24" @click="openRuleModal=false"></u-icon>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="showpledge" >
			<view class="overlayoadingicon">
				<u-loading-icon :text="$t('home.H49')" textColor="blue" textSize="14" color="blue"></u-loading-icon>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	import {
		USDTController,
		USDT_contracts,
		contractsOBJ,
		controAdress
	} from '@/api/web3.js'
	import {number2string} from '@/api/help.js'
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				resultValue: 100,
				activeCheck: 0,
				openBuyPop: false,
				openSharePop: false,
				openRuleModal: false,
				showpledge:false,
				showoverl:false,
				invite_code:"",
				valueCode:"",
				Subscribed:"",
				totalCount: '',
				usreaddress:"",
				currentLan: localStorage.getItem('locale'),
				dataShowList:[
						{img:require('@/static/hjpImg/tuBi.png'), title: this.$t('home.H12'), count: '1.000.000.000.0000'},
						// {img:require('@/static/hjpImg/tuQian.png'), title: this.$t('home.H13'), count: '0'},
						// {img:require('@/static/hjpImg/tuXiao.png'), title: this.$t('home.H14'), count: '324245'},
				],
				footerIcon: [
					{img: require('@/static/hjpImg/lianOne.png'),limke:'#'},
					{img: require('@/static/hjpImg/lianTwo.png'),limke:'https://twitter.com/HPJH03/status/1715039313308918134?s=19'},
					{img: require('@/static/hjpImg/lianThree.png'),limke:'#'},
					{img: require('@/static/hjpImg/lianFour.png'),limke:'https://telegram.org/dl'},
					{img: require('@/static/hjpImg/lianFive.png'),limke:'https://www.facebook.com/profile.php?id=61552675223484'},
				],
				
				listArr:[
					{count: '7895.00', name: this.$t('home.H33')},
					{count: '7895.89', name: this.$t('home.H34')},
				],
				selectUse:{},
				buyList: ['100', '300', '500', '1000'],
				percentageValue: 30,
			}
		},
		computed:{
			// <!-- Telegram号:+668-0461-1602
			// 推特:@HPJH03
			// Facebook:Plan Peace -->
		},
		watch:{
			'usreaddress':function(a,b){
				this.getselectPrice();
				this.userData();
				this.getselectUpline();
			},
			deep:true
		},
		onLoad(parameter) {
			if(parameter.code){
				uni.setStorageSync('code', parameter.code);
				this.valueCode = parameter.code;
			}else{
				uni.setStorageSync('code', '');
			}
		},
		mounted() {
			this.usreaddress = uni.getStorageSync('account')|| '';
			this.valueCode = uni.getStorageSync('code')|| '';
			if(this.usreaddress){
				this.getselectPrice();
				this.userData();
				this.getselectUpline();
			}
		},
		onShow() {
		},
		methods: {
			//0.获取当前币价格返回值：当前价格 （实际价格需要 除 1000）
			async getselectPrice(){
				let res = await contractsOBJ.methods.selectPrice().call();
				let res1 = await contractsOBJ.methods.numberOfHolders().call();
				let res2 = await contractsOBJ.methods.selectAmount().call();
				this.Subscribed = (res2/1000000000000000000)+3000000;
				this.percentageValue = (((this.Subscribed/10000000)*100).toFixed(2));
				console.log(this.percentageValue,'this.percentageValue');
				// this.$set(this.dataShowList[1],'count',res/1000);
				// this.$set(this.dataShowList[2],'count',res1);
				
			},
			//查询否绑定推荐人
			async getselectUpline(){
				//let res = await contractsOBJ.methods.selectUpline('0x5848114d449FF837aDD54971D6da120E73Bfa128').call();
				let res = await contractsOBJ.methods.selectUpline(this.usreaddress).call();
				console.log(res, '返回');
				if(res === "" || res === "0x0000000000000000000000000000000000000000"){
					this.showoverl = true;
				}else{
					this.showoverl = false;
				}
				
			},
			//绑定推荐人
			async binCilck(){
				if(this.valueCode == ''){
					return uni.showToast({
						title: this.$t('home.H74'),
						icon: "none",
						duration: 3000,
					})
				}
				this.showpledge = true;
				let sendapprove = await contractsOBJ.methods.upline(this.valueCode).send({from: this.usreaddress});
				if(sendapprove){
					this.showpledge = false;
					uni.showToast({
						title: this.$t('home.H75'),
						icon: "success",
						duration: 3000,
					})
					this.showoverl = false;
				}
			},
			//8.查询用户信息
			async userData(){
				let res = await contractsOBJ.methods.selectUsersInfo(this.usreaddress).call();
				this.$set(this.listArr[0],'count',res[4]);
				this.$set(this.listArr[1],'count',res[5]/1000000000000000000);
				//6：我的100U当前推荐人数
				//7：我的300U当前推荐人数
				//	8：我的500U当前推荐人数
				this.selectUse = res;
				this.$set(this.listArr[2],'count',res[6]);
				this.$set(this.listArr[3],'count',res[7]/1000000000000000000);
				
			},
			async BUYClick(){
				console.log(this.resultValue,'resultValue');
				if(this.resultValue==100 && this.selectUse[10]){
					return  uni.showToast({
						title: this.$t('home.H76'),
						icon: "none",
						duration: 3000,
					})
				}
				if(this.resultValue==300 && this.selectUse[6]<5){
					console.log('zoulezheli');
					return  uni.showToast({
						title: this.$t('home.H77'),
						icon: "none",
						duration: 3000,
					})
				}
				if(this.resultValue==500 && this.selectUse[7]<3){
					return  uni.showToast({
						title: this.$t('home.H77'),
						icon: "none",
						duration: 3000,
					})
				}
				if(this.resultValue==1000 && this.selectUse[8]<2){
					return  uni.showToast({
						title: this.$t('home.H77'),
						icon: "none",
						duration: 3000,
					})
				}
				try{
					//授权
					let resjoinHs
					let value ='1000000000000000000000';
					let result = await USDT_contracts.methods.allowance(this.usreaddress,controAdress).call();
					let sunNBMer = number2string(this.resultValue*1000000000000000000)
					if(result < sunNBMer){
						this.showpledge = true;
						let sendapprove = await USDT_contracts.methods.approve(controAdress,sunNBMer).send({from: this.usreaddress});
						if(sendapprove){
							resjoinHs = await contractsOBJ.methods.deplay(sunNBMer).send({from:this.usreaddress});
							if(resjoinHs){
								this.showpledge = false;
								uni.showToast({
									title: this.$t('home.H78'),
									icon: "success",
									duration: 3000,
								})
								this.openBuyPop = false;
							}
						}
					}else{
						this.showpledge = true;
						resjoinHs = await contractsOBJ.methods.deplay(sunNBMer).send({from:this.usreaddress});
						if(resjoinHs){
							this.showpledge = false;
							uni.showToast({
								title: this.$t('home.H78'),
								icon: "success",
								duration: 3000,
							})
							this.openBuyPop = false;
						}
					}
				}catch(e){
					this.showpledge = false;
				}
				
			},
			
			// 触发方法
			copy(cont) {
				uniCopy({
					content: cont,
					success: (res) => {
						uni.showToast({
							title: '复制成功！',
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			buyPopFun() {
				this.openBuyPop = false;
			},
			changeFun(index, item) {
				this.activeCheck = index;
				this.resultValue = item;
				//this.dataShowList[1]
				console.log(index);
			},
			getLanguage(value) {
				this.currentLan = value;
				console.log(this.currentLan);
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.text1{
	font-family: PangMenZhengDao;
	font-size: 36rpx;
	color: #FFFFFF;
	line-height: 36rpx;
	text-align: center;
	font-style: normal;
	margin: 30rpx 0 44rpx 0;
}
.home-box {
	width: 100%;
	background: url('../../static/hjpImg/pageBg.png'); 
	background-size: cover;
	height: 100%;
	.home-frist-box {
		width: 750rpx;
		height: 857rpx;
		margin: 0 auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.home-second-box {
		width: 315px;
		font-size: 64rpx;
		margin: 0 auto;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 16px;
		font-weight: bold;
		font-family: PangMenZhengDao;
	}
	.home-second-en {
		@include ellipse();
		font-size: 58rpx;
	}
	.buy-one {
		@include size(315px, 84px);
		margin: 0 auto;
		margin-bottom: 30px;
		@include font(13px, 400);
		color: #FFFFFF90;
		line-height: 60rpx;
		text-align: center;
		letter-spacing: 3rpx;
	}
	.buy-one-en {
		@include ellipse();
		font-size: 15px;
	}
	.ren-button {
		@include size(315px, 50px);
		margin: 0 auto;
		margin-bottom: 16px;
		line-height: 50px;
		background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
		border-radius: 8px;
		text-align: center;
		@include font(16px, 600);
		color: #FFFFFF;
		margin-bottom: 80rpx;
	}
	.ren-rules {
		@include flex-space-between(center, center);
		margin: 0 0 50px 0px;
		@include font(16px, 400);
		color: #691EE2;
		height: 22px;
		.tip-icon {
			@include size(16px, 16px);
			margin-right: 7px;
		}
		.right-arrow {
			@include size(14px, 8px);
			margin-left: 7px;
		}
	}
	.home-data-show {
		margin: 0 auto;
		margin-bottom: 50px;
		background: #161A33;
		border-radius: 10px;
		width: 600rpx;
		padding: 40rpx 30rpx;
		.data-show-one {
			padding-top: 40px;
			text-align: center;
			@include size(100%, 39px);
			@include font(32px, 600);
			color: #DDDDDD;
			line-height: 38px;
		}
		.data-show-two {
			background: #1D2139;
			border-radius: 10px;
			margin: 0 auto;
			text-align: center;
			padding: 36rpx 0 14rpx;
			.itemtwo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				>view{
					width: 33%
				}
			}
			.img-style {
				@include size(42px, 42px);
				margin: 0 auto;
				margin-bottom: 14px;
				padding-top: 10px;
			}
			.name-style {
				margin-bottom: 14px;
				@include size(100%, 19px);
				@include font(14px, 400);
				color: #808080;
				line-height: 19px;
			}
			.count-style {
				@include size(100%, 19px);
				margin-bottom: 30px;
				@include font(24px, 500);
				color: #FFFFFF;
				line-height: 19px;
			}
		}
		.foottext{
			font-family: PingFang-TC, PingFang-TC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF95;
			line-height: 36rpx;
			text-align: center;
			margin-top: 42rpx;
		}
		.data-show-twos {
			padding: 54rpx 8rpx 54rpx;
			background: #1D2139;
			border-radius: 10px;
			margin: 0 auto;
			text-align: center;
			margin-top: 32rpx;
			.itemtwo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				>view{
					width: 30%;
					>view:nth-child(1){
						font-family: Montserrat, Montserrat;
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
						line-height: 38rpx;
						font-style: normal;
						margin-bottom: 12rpx;
					}
					>view:nth-child(2){
						font-weight: 400;
						font-size: 24rpx;
						color: #999;
						
					}
				}
				>view:nth-child(2){
					border-left: 2rpx solid #97979710;
											border-right: 2rpx solid #97979710;
					 
				}
			}
			
		}
		.token-style {
			@include size(327px, 19px);
			margin: 14px 0 19px;
			text-align: center;
			@include font(16px, 400);
			color: #FFFFFF;
			line-height: 19px;
		}
		.date-box {
			@include size(295px, 12px);
			margin: 0 auto;
		}
		.home-plege-btn {
			@include size(295px, 19px);
			line-height: 19px;
			margin: 0 auto;
			margin-top: 19px;
			margin-bottom: 30px;
			color: #808390;
			@include flex-space-between(space-between, center);
			@include font(13px, 400);
		}
	}
	.home-four-title {
		text-align: center;
		@include size(100%, 27px);
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 27px;
		margin-bottom: 31px;
		font-weight: bold;
	}
	.home-five-box {
		padding: 40rpx 32rpx;
		width: 600rpx;
		margin: 0 auto;
		background: #161A33;
		border-radius: 10px;
		.itembox{
			margin-bottom: 20rpx;
			>view:nth-child(1){
				display: flex;
				align-items: center;
				color: #8344E8;
				font-size: 34rpx;
				font-weight: bold;
				view:nth-child(1){
					width: 10rpx;
					height: 10rpx;
					background: #8344E8;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
			>view:nth-child(2){
				margin-left: 30rpx;
				font-size: 24rpx;
				line-height: 2;
				letter-spacing: 4rpx;
			}
			
		}
		.home-five-vedio {
			width: 100%;
			height: 80px;
			background: rgba(255,255,255,0.03);
			border-radius: 10px 10px 0px 0px;
			border: 1px solid rgba(151,151,151,0.1);
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			margin-bottom: 28px;
			.five-icon {
				@include size(64px, 64px);
				margin: 0px 11px 0 16px;
				padding-top: 40px;
			}
			.five-user {
				font-size: 16px;
				color: #FFFFFF;
				margin-top: 10px;
			}
		}
		.home-five-show {
			@include flex-space-between(space-between, center);
			height: 20px;
			@include font(14px, 400);
			color: #FFFFFF;
			line-height: 20px;
			margin: 0px 24px 19px 16px;
			.five-text {
				width: 145px;
				@include ellipse(1);
			}
			.five-rate {
				color: #691EE2;
			}
		}
	}
	.home-six-box {
		@include size(327px, 180px);
		margin: 0 auto;
		@include flex-space-between(space-between, center);
		flex-wrap: wrap;
		align-content: center;
		.home-six-list {
			@include size(159px, 100px);
			background: #161A33;
			margin-top: 10px;
			border-radius: 8px;
			.item-six-list {
				width: 143px;
				margin: 18px 0 17px 16px;
				.six-list-line {
					@include size(18px, 2px);
					background: #691EE2;
					margin-bottom: 16px;
				}
				.six-list-count {
					margin-bottom: 7px;
					@include size(100%, 21px);
					@include font(16px, 600);
					color: #FFFFFF;
					line-height: 21px;
				}
				.six-list-name {
					margin-bottom: 17px;
					@include size(100%, 21px);
					@include font(14px, 400);
					color: #808080;
					line-height: 21px;
				}
				.six-list-en {
					font-size: 12px;
					@include ellipse(1);
				}
			}
		}
	}
	.six-list-btn {
		text-align: center;
		@include size(162px, 42px);
		background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
		border-radius: 21px;
		line-height: 42px;
		color: #FFFEFE;
		@include font(16px, 400);
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 50px;
	}
	.six-list-text {
		text-align: center;
		
		
		font-family: AlibabaPuHuiTiB;
		font-size: 40rpx;
		color: #FFFFFF;
		font-style: normal;
		font-weight: bold;
		margin:80rpx 0 60rpx 0;
	}
	.home-nine-box {
		width: 554rpx;
		height: 423rpx;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 50px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.home-footer {
		background: #161A33;
		padding: 120rpx 0 120rpx 0;
		.item-footer {
			margin-left: 40px;
			.footer-tbox {
				
				margin-bottom: 80rpx;
				display: flex;
				align-items: center;
				font-size: 40rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
				image{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}
			}
			.menu-list {
				@include size(295px, 42px);
				margin: 0 40px 47px 0;
				@include flex-space-between(space-between, center);
				.menu-list-item {
					@include size(42px, 42px);
				}
			}
			.footer-icon-box {
				width: 100%;
				height: 27px;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 27px;
			}
		}
	}
	.overlay-buy {
		padding: 20rpx 26rpx 60rpx;
		margin: 0 auto;
		margin-top: 189px;
		background: #161A33;
		border-radius: 10px;
		>view:nth-child(5){
			text-align: center;
			font-size: 28rpx;
			margin-top: 52rpx;
			>text{
				color: #ffffff95;
			}
		}
		.input{
			width: 582rpx;
			height: 98rpx;
			background: rgba(255,255,255,0.03);
			border-radius: 16rpx;
		}
		.close-buy {
			margin: 21px 0 0px 290px;
		}
		.buy-title {
			@include size(100%, 25px);
			margin-bottom: 45px;
			text-align: center;
			@include font(18px, 600);
			color: #FFFFFF;
			line-height: 25px;
		}
		.buy-content {
			@include size(295px, 126px);
			margin: 0 auto;
			margin-bottom: 2px;
			@include flex-space-between(space-between, center);
			flex-wrap: wrap;
			align-content: center;
			.but-con-item {
				@include size(141px, 49px);
				background: rgba(255,255,255,0.03);
				border-radius: 8px;
				color: #777988;
				line-height: 49px;
				text-align: center;
				@include font(16px, 500);
				margin-bottom: 14px;
			}
			.but-active-item {
				border: 1px solid #6B21E2;
				color: #FFFFFF;
			}
		}
		.buy-number {
			@include size(295px, 18px);
			margin: 0 auto;
			margin-bottom: 14px;
			@include font(13px, 500);
			color: #B9C1D9;
			line-height: 18px;
			@include flex-space-between(space-between, center);
			.buy-bi {
				@include font(14px, 400);
				color: #FFFFFF;
			}
			.buy-count {
				@include font(14px, 400);
				color: #26A17B;
			}
		}
		.buy-margin {
			margin-bottom: 31px;
		}
		.buy-button {
			@include size(295px, 54px);
			margin: 0 auto;
			margin-bottom: 16px;
			background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
			border-radius: 8px;
			line-height: 54px;
			@include font(16px, 400);
			color: #fff;
			text-align: center;
		}
		.but-tip {
			@include size(327px, 20px);
			line-height: 20px;
			margin-bottom: 30px;
			text-align: center;
			@include font(14px, 400);
			color: #808080;
			@include flex-space-between(center, center);
			.buy-tip-title {
				color: #FFFFFF;
				margin-left: 6px;
			}
		}
	}
	.overlay-share {
		@include size(327px, 286px);
		margin: 0 auto;
		margin-top: 263px;
		background: #161A33;
		border-radius: 10px;
		.close-style {
			margin: 21px 0 44px 290px;
		}
		.share-text {
			@include size(273px, 66px);
			margin: 0 auto;
			@include font(16px, 400);
			color: #FFFFFF;
			line-height: 22px;
			margin-bottom: 55px;
			text-align: center;
			word-wrap: break-word;
		}
		.share-button {
			@include size(295px, 54px);
			margin: 0 auto;
			margin-bottom: 30px;
			background: linear-gradient(315deg, #DECAFF 0%, #691EE2 100%);
			border-radius: 8px;
			@include font(16px, 400);
			color: #0C0C0C;
			text-align: center;
			line-height: 54px;
		}
	}
	.overlay-rules {
		margin: 160px 20px 0;
		border: 1px soild red;
		height: 400px;
		.overlay-text {
			background: #FFFFFF;
			border-radius: 15px;
			padding: 30px 0;
			.overtitle {
				margin: 0px 20px 18px;
				height: 31px;
				@include font(22px, bold);
				color: #073B4C;
				line-height: 33px;
			}
			.overtext {
				margin: 0px 17px 10px 18px;
				height: 63px;
				@include font(14px, 400);
				color: #073B4C;
				line-height: 21px;
			}
			.overmutils {
				margin: 0 17px 0 18px;
				height: 168px;
				@include font(14px, 400);
				color: #073B4C;
				line-height: 21px;
			}
		}
		.close-btn {
			margin: 30px 155px 0;
		}
		
	}
}
.overlayoadingicon{
	position: absolute;
	top: 50%;
	left: 50%;
	color: blue;
	transform: translate(-50%,-50%);
}
.ceotent{
	width: 300px;
	height: 250px;
	border-radius: 5%;
	background-color: #201E28;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	.ceotbox{
		padding-top: 10px;
		display: flex;
		justify-content: right;
		margin-right: 10px;
	}
	.overlaytitle{
		text-align: center;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		
	}
	.codeinput{
		width: 250px;
		margin: 0 auto;
		margin-top: 30px;
		border-radius: 15px;
		border: 1px solid #555;
		/deep/.u-input__content__field-wrapper__field{
			height: 60px;
		}
	}
	.qeuding{
		width: 250px;
		margin: 0 auto;
		margin-top: 30px;
		font-size: 16px;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		border-radius: 15px;
		line-height: 40px;
		border: 1px solid #555;
		background-size: cover;
	}
}

</style>